<template>

  <div style="width:240px;min-height: 200px;">
    <div style="display: flex;zoom:0.9;margin: 4px auto;">
      <el-input v-model="$data.search" @keyup="search_up" style="margin: 2px;"></el-input>
    </div>

    <div class="tags stage" ref="tags">
      <template v-for="item in $data.models" :key="item.id">
        <el-tag :data-id="item.id" data-stage :title="item.treeTypes.map(it=>it.name).join(',')"  @dblclick="jumpToModel(item.id)">{{ item.name }}</el-tag>

      </template>
    </div>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator at 2024-04-15 22:12:27
 * https://sortablejs.com/
 */
import Sortable from 'sortablejs'
import {Search, CirclePlus, Plus, Remove, EditPen} from '@element-plus/icons-vue'



defineOptions({
  name: "model-search",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
let $self = getCurrentInstance();

//定义 $attrs
let $attrs = useAttrs()


//定义事件
let $emit = defineEmits(["update:modelValue", "change"]);

//定义属性
var $props = defineProps({});
var $model = defineModel({type: Object});


//定义data
let $data = reactive({
  //默认查询条件,默认存储
  models: [],
  search: ""
})
const search_up = jv._.debounce(() => {
  if (!$model.value || !$model.value.id) {
    return;
  }

  jv.$http.post("/dev/data-model/selector/" + $model.value.id + "?search=" + $data.search).then(res => {
    $data.models = res.data
    jv.$saveData("search", $data.search)
  })
}, 600, {
  'leading': false,
  maxWait: 1000,
  'trailing': true
})

const jumpToType = item => {
  var typeId = item.treeType.id;
  $emit("change", typeId);
}


const tags = ref();

let right;

const setDrag = () => {

  right && right.destroy();
  right = new Sortable(tags.value, {
    group: {
      name: 'shared',
    },
    animation: 150,
    disabled: !($model.value && $model.value.id)
  });
}

const jumpToModel = id => {
  jv.$router.push("/dev/data-model/edit/" + id)
}


watch(() => $model, v => {
  jv.$loadData("search", v => $data.search = v)
  search_up();

  nextTick(setDrag);
}, {immediate: true});


</script>
<style scoped lang="scss">
.stage {
  .el-tag {
    background-color: #dbdbdb;
    color: gray;
    border-color: #bbbbbb;
  }

  .tail {
    font-size: 12px;
  }
}

.sortable-chosen {
  color: blue !important;
}
</style>
